<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>首页</title>
    <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
</head>
<body>
<div class="pageheader">
    <h2>首页</h2>
</div>
<div class="contentpanel">

    <shiro:hasPermission name="SETTING:*">
        <div class="row bg-info">
            <div id="settingProfile" class="col-md-7" style="height: 300px;">

            </div>
            <div id="diskProfile" class="col-md-5" style="height: 300px;">

            </div>
        </div>
    </shiro:hasPermission>

    <div style="text-align:center;margin-top:20%;font-size:40px;">暂未实现
    </div>
</div>
<script type="text/javascript">
    <c:if test="${not empty param.edit}">
    jQuery.gritter.add({
        title: '更新成功!',
        class_name: "growl-success",
        sticky: false
    });
    </c:if>
    <shiro:hasPermission name="SETTING:*">
    //内存及CPU使用情况
    var settingProfileChart = echarts.init(document.getElementById('settingProfile'));
    option = {
        title: {
            text: '服务器CPU/内存使用情况'
        },
        tooltip: {
            formatter: "{a} <br/>{c}%已使用"
        },
        series: [
            {
                name: 'CPU',
                type: 'gauge',
                center: ['30%', '55%'],    // 默认全局居中
                min: 0,
                max: 100,
                splitNumber: 10,
                radius: '80%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 10
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length: 15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                title: {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic'
                    }
                },
                detail: {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    }
                },
                data: [{value: 40, name: 'CPU'}]
            }
            ,
            {
                name: '内存',
                type: 'gauge',
                center: ['75%', '55%'],    // 默认全局居中
                min: 0,
                max: 100,
                splitNumber: 10,
                radius: '80%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 10
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length: 15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                title: {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic'
                    }
                },
                detail: {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    }
                },
                data: [{value: 50, name: '内存'}]
            }
        ]
    };
    settingProfileChart.setOption(option);

    var diskProfileChart = echarts.init(document.getElementById('diskProfile'));
    diskOption = {
        title: {
            text: '磁盘使用情况统计(百分比)'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: "{a} <br/>{c}%已使用"
        },
        grid: {
            top: 50,
            bottom: 30
        },
        xAxis: {
            type: 'value',
            position: 'top',
            splitLine: {lineStyle: {type: 'dashed'}}
        },
        yAxis: {
            type: 'category',
            axisLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false},
            splitLine: {show: false},
            data: []
        },
        series: [
            {
                name: '磁盘使用量',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}'
                    }
                }
            }
        ]
    };
    diskProfileChart.setOption(diskOption);
    getProfileData();
    setInterval(getProfileData, 10000);

    function getProfileData() {
        $.ajax({
            url: '${contextPath}/admin/setting/profile',
            type: 'get',
            cache: false,
            success: function (data) {
                settingProfileChart.setOption({
                    series: [
                        {
                            data: [{value: parseInt(data.cpuUsedPerc * 100), name: 'CPU'}]
                        },
                        {
                            data: [{value: parseInt(data.memUsedPerc), name: '内存'}]
                        }
                    ]
                });
                var diskData = new Array();
                var diskName = new Array();
                for (var i = 0; i < data.fileSystems.length; i++) {
                    var fileSystem = data.fileSystems[i];
                    diskData.push({value: fileSystem.usePercent});
                    diskName.push(fileSystem.dirName);
                }
                diskProfileChart.setOption({
                    yAxis: {
                        data: diskName
                    },
                    series: [{data: diskData}]
                });
            }
        });
    }
    </shiro:hasPermission>
</script>


</body>

</html>
